<%--
  Created by IntelliJ IDEA.
  User: 86153
  Date: 2021/10/31 031
  Time: 22:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>填写信息</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!--导入css文件-->
    <link rel="shortcut icon" href="../image/title-img1.png">
    <link href="${pageContext.request.contextPath}/css/save.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/index.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/save1.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/save2.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/waitPay.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/footer.css" rel="stylesheet">

    <style>

        /* 头部导航的 */
        .global-header .login-page-header-nav li {
            float: left;
            margin-left: 30px;
        }

        .global-header .login-page-header-nav li i {
            margin-right: 10px;
            font-size: 28px;
            line-height: 1;
            color: #f6a206;
            vertical-align: middle;
        }

        .global-header .login-page-header-nav li span {
            font-size: 14px;
            line-height: 28px;
            color: #666;
            vertical-align: middle;
        }
    </style>
</head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/index-1.css">
<link href="${pageContext.request.contextPath}/css/headermenu.css" rel="stylesheet">

<body>

<header id="J-global-header" class="global-header">
    <div class="top-inner">
        <div id="sitenav" class="global-header-top-nav fn-clear">
            <div class="global-header-top-nav-right">
                <li class="top-nav-menu top-nav-menu-user-info" data-role="user-info" data-test="test">
                    <div class="top-nav-menu-handle">
                        <div class="login">
                            <%--                            <a href="${pageContext.request.contextPath}/login.jsp" class="J-login-btn" rel="nofollow" target="_self">登录/注册</a></div>--%>
                            <c:if test="${empty ServiceResponse}">
                                <a href="${pageContext.request.contextPath}/customer/login.jsp">登录/注册</a>
                            </c:if>

                            <c:if test="${!empty ServiceResponse}">
                                欢迎${ServiceResponse.data.custTelno}
                                <a href="${pageContext.request.contextPath}/logout">退出</a>
                            </c:if>
                        </div>
                    </div>
                </li>

                <li class="top-nav-menu top-nav-multi-menu top-nav-dl-app">
                    <div class="top-nav-menu-handle">
                        <i class="global-header-icon top-nav-dl-app-icon"></i>手机版
                    </div>
                    <div class="top-nav-menu-body top-nav-menu-qrcode">
                        <div class="top-nav-menu-bd-panel">
                            <div class="qrcode-img"></div>
                            <p>下载APP 领99元租车红包

                            </p>
                        </div>
                    </div>
                </li>

                <li class="top-nav-pipe">|</li>

                <li class="top-nav-menu top-nav-multi-menu top-nav-wx-guide">
                    <div class="top-nav-menu-handle"><i class="global-header-icon top-nav-wx-guide-icon"></i>微信</div>
                    <div class="top-nav-menu-body top-nav-menu-qrcode">
                        <div class="top-nav-menu-bd-panel">
                            <div class="qrcode-img"></div>
                            <p>扫一扫，关注微信</p>
                        </div>
                    </div>
                </li>
                <li class="top-nav-menu top-nav-multi-menu top-nav-order-lookup">
                    <div class="top-nav-menu-handle">订单查询<i class="top-nav-arrow"><em></em><span></span></i></div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <a href="${pageContext.request.contextPath}/center/myorder.jsp">订单查询</a>
                        </div>
                    </div>
                </li>
                <li class="top-nav-menu top-nav-multi-menu top-nav-order-lookup">
                    <div class="top-nav-menu-handle">个人中心<i class="top-nav-arrow"><em></em><span></span></i></div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <a href="${pageContext.request.contextPath}/center/user.jsp">进入个人中心</a>
                        </div>
                    </div>
                </li>
                <li class="top-nav-pipe">|</li>

            </div>

            <div class="global-header-top-nav-left">
                <div class="top-nav-menu top-nav-multi-menu top-nav-contact">
                    <div class="top-nav-menu-handle">
                        24小时客服！内地热线：110-120
                        <i class="top-nav-arrow"><em></em><span></span></i>
                    </div>
                    <div class="top-nav-menu-body top-nav-menu-list">
                        <div class="top-nav-menu-bd-panel">
                            <ul>
                                <li>
                                    <span class="title">中国内地热线</span>
                                    <a href="tel:10101020" target="_self" class="tel-number">110-120</a>
                                </li>
                            </ul>
                            <div class="top-nav-menu-bd-code">
                                <div class="qrcode-img"></div>
                                <p class="title">关注微信公众号</p>
                                <p class="text">可查询/修改/取消订单</p>
                                <a class="J-show-robot" href="javascript:" target="_self"
                                   data-tj="/公用头部/在线客服">24小时在线客服</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="topbar fn-clear">
        <div id="slog" class="logo fn-left">
            <a class="sbx-logo" title="思必行-租车" target="_self" href="">
            </a>
        </div>
        <div class="global-site-header-nav">
            <div class="header-steps-wrapper">
                <div class="header-steps J-header-steps">

                    <div class="header-step-item header-step-item-search,luxurySearch is-active ">
                        <div class="header-step-item-header">
                            <i class="header-step-item-dot"></i>
                            <div class="header-step-item-line">
                            </div>
                        </div>
                        <div class="header-step-item-content">
                            <div class="header-step-item-title">选择车型</div>
                            <div class="header-step-item-desc"></div>
                        </div>
                    </div>
                    <div class="header-step-item header-step-item-views is-active is-current">
                        <div class="header-step-item-header">
                            <i class="header-step-item-dot"></i>
                            <div class="header-step-item-line"></div>
                        </div>
                        <div class="header-step-item-content">
                            <div class="header-step-item-title">填写信息</div>
                            <div class="header-step-item-desc"></div>
                        </div>
                    </div>
                    <div class="header-step-item header-step-item-pay">
                        <div class="header-step-item-header">
                            <i class="header-step-item-dot"></i>
                            <div class="header-step-item-line"></div>
                        </div>
                        <div class="header-step-item-content">
                            <div class="header-step-item-title">在线支付</div>
                            <div class="header-step-item-desc"></div>
                        </div>
                    </div>
                    <div class="header-step-item header-step-item-success  ">
                        <div class="header-step-item-header">
                            <i class="header-step-item-dot"></i>
                            <div class="header-step-item-line"></div>
                        </div>
                        <div class="header-step-item-content">
                            <div class="header-step-item-title">预订成功</div>
                            <div class="header-step-item-desc"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</header>

<div id="react-app">
    <div class="wrapper">
        <div class="order">
            <div class="order-section order-status">
                <div class="order-status-header">
                    <svg class="order-status-icon icon-wait">
                        <use xlink:href="#icon_wait"></use>
                    </svg>
                    <h2 class="order-status-title is-warning">未支付</h2></div>
                <div class="order-status-info">
                   <div class="order-status-info-item">订单编号：${serverResponse.data.myorder.orderNum}</div>

                    <div class="order-time"><p id="page_div"><span class="font-red" style="color:#ee0909;">15秒</span>后，自动返回首页</p></div>
                </div>
<%--                <div class="order-status-footer">--%>
<%--                    &lt;%&ndash;                    <div class="order-status-desc">请在<span class="order-status-timer">2021-10-31 22:48</span>前支付，超时订单自动关闭&ndash;%&gt;--%>
<%--                    &lt;%&ndash;                    </div>&ndash;%&gt;--%>
<%--                    <div class="order-status-btn-group">--%>
<%--                        <button class="button button-default cancel-btn">取消订单</button>--%>
<%--                        <button class="button button-primary button-large">立即支付</button>--%>
<%--                    </div>--%>
<%--                </div>--%>
            </div>
            <div class="order-section order-section-border-bottom"><h2 class="order-section-title">行程信息</h2>
                <div class="traval-info">
                    <div class="car-info"><img src="${serverResponse.data.car.carImgPath}" class="car-info-pic"
                    >
                        <h4 class="car-info-name"></h4>
                        <div class="car-info-dealer"><img class="car-info-dealer-logo"
                                                          src="${serverResponse.data.car.carImgPath}">由思必行租车提供
                        </div>
                        <div class="car-info-detail"><span class="car-info-detail-other">${serverResponse.data.car.carMatic} | ${serverResponse.data.car.carSeatnum}座 | ${serverResponse.data.car.carInventory}L</span></div>
                    </div>
                    <div class="rental-info-wrapper">
                        <div class="rental-info-date"><p>${serverResponse.data.myorder.carRentday}天</p></div>
                        <div class="rental-info"><h4 class="rental-info-title">取车：${serverResponse.data.myorder.orderStartDate}</h4>
                            <div class="rental-info-item"><p class="rental-info-item-inner">
                                门店位置：${serverResponse.data.borrowStore.storeAddress}</p><a class="rental-info-item-value link-button">取车指引</a>
                            </div>
                            <div class="rental-info-item">营业时间：24小时</div>
                        </div>
                        <div class="rental-info"><h4 class="rental-info-title">还车：${serverResponse.data.myorder. orderEndDate}</h4>
                            <div class="rental-info-item"><p class="rental-info-item-inner">
                                门店位置：${serverResponse.data.returnStore.storeAddress}</p><a class="rental-info-item-value link-button">还车指引</a>
                            </div>
                            <div class="rental-info-item">营业时间：24小时</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-section order-section-border-bottom"><h2 class="order-section-title">租车保障及附加服务</h2>
                <div class="ensure">
                    <div class="ensure-item"><i class="ensure-item-icon"></i>
                        <div class="ensure-item-right">
                            <h4 class="ensure-item-title">基本保障服务<span><div class="Label blue">车行提供</div></span></h4>
                            <div class="ensure-item-body">
                                <div class="ensure-item-text"><p> · 无需承担理赔范围内车辆损失超过<span class="bold">1500元</span>的部分(不保玻璃、轮胎轮毂)
                                </p>
                                    <p> · 第三者责任险</p>
                                    <p> · 需承担因车损导致的停运费、折旧费</p></div>
                                <a class="link-button">详情<i class="link-button-arrow-right"></i></a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-section order-section-border-bottom"><h2 class="order-section-title">驾驶人及联系信息</h2>
                <div class="driver-info">
                    <div class="driver-info-item"><span class="driver-info-item-label">驾驶人</span><span
                            class="driver-info-item-value">${serverResponse.data.myorder.carRentname}</span></div>
                    <div class="driver-info-item"><span class="driver-info-item-label">证件号码</span><span
                            class="driver-info-item-value">${serverResponse.data.myorder.carRentidcard}</span></div>
                    <div class="driver-info-item"><span class="driver-info-item-label">手机号码</span><span
                            class="driver-info-item-value">${serverResponse.data.myorder.carTellno}</span></div>
<%--                    <button class="button button-default btn-edit">--%>
<%--                        <svg class="button-icon icon-scan">--%>
<%--                            <use xlink:href="#icon_scan"></use>--%>
<%--                        </svg>--%>
<%--                        <span class="button-text">修改信息</span></button>--%>
                </div>
            </div>
            <div class="order-section order-section-border-bottom"><h2 class="order-section-title">取消政策</h2>
                <div class="cancel-policy">
                    <div class="steps-wrapper">
                        <div class="steps">
                            <div class="step-item is-active">
                                <div class="step-item-header"><i class="step-item-dot is-active"></i>
                                    <div class="step-item-line"></div>
                                    <div class="step-item-tooltips">免费取消</div>
                                </div>
                                <div class="step-item-content is-active">
                                    <div class="step-item-title">订单未支付</div>
                                    <div class="step-item-desc"></div>
                                </div>
                            </div>
                            <div class="step-item">
                                <div class="step-item-header"><i class="step-item-dot is-active"></i>
                                    <div class="step-item-line"></div>
                                    <div class="step-item-tooltips">扣除订单总费用的30%</div>
                                </div>
                                <div class="step-item-content is-active">
                                    <div class="step-item-title">取车时间前4小时</div>
<%--                                    <div class="step-item-desc">2021-11-02 06:00</div>--%>
                                </div>
                            </div>
                            <div class="step-item">
                                <div class="step-item-header"><i class="step-item-dot"></i>
                                    <div class="step-item-line"></div>
                                    <div class="step-item-tooltips">扣除订单总费用的100%</div>
                                </div>
                                <div class="step-item-content">
                                    <div class="step-item-title">取车时间</div>
                                    <div class="step-item-desc">${serverResponse.data.myorder.orderStartDate}</div>
                                </div>
                            </div>
                            <div class="step-item">
                                <div class="step-item-header"><i class="step-item-dot"></i>
                                    <div class="step-item-line"></div>
                                </div>
                                <div class="step-item-content">
                                    <div class="step-item-title">还车</div>
                                    <div class="step-item-desc">2021-11-05 10:00</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cancel-policy-right">
<%--                        <button class="button button-default cancel-btn">取消订单</button>--%>
                        <p class="cancel-policy-tips">* 上述取消政策中所指的订单费用为用券前价格，且不包含租租车保险；</p>
                        <p class="cancel-policy-tips">* 如已购买租租车保险，取车前可享免费取消，过取车时间后不可取消。</p></div>
                </div>
            </div>
            <div class="order-section"><h2 class="order-section-title">发票信息</h2>
                <div class="invoice-info">
                    <div class="invoice-info-left">
                        <div class="invoice-info-item">
                            <div class="invoice-info-item-title">租车费用</div>
                            <div class="invoice-info-item-desc">租车费用发票由门店提供，如需发票，请在还车时向门店索取。</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order-section notice"><h2 class="order-section-title">租车须知</h2>
                <div class="notice-main">
                    <div class="notice-item">
                        <div class="notice-item-title">取车必备材料，请持驾驶员本人有效证件原件取车：<span>非中国大陆居民？</span></div>
                        <div class="notice-item-body">
                            <div class="material">
                                <ol>
                                    <li><p><strong>二代身份证</strong><em>有效期要求：1个月以上</em></p></li>
                                    <li><p><strong>驾照</strong><em>有效期要求：1个月以上<br>驾龄要求：大于6个月</em></p></li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <div class="notice-item">
                        <div class="notice-item-title">里程限制</div>
                        <div class="notice-item-body">
                            <div class="notice-item-desc"><p>不限里程：无里程限制</p></div>
                        </div>
                    </div>
                    <div class="notice-item">
                        <div class="notice-item-title">燃油政策</div>
                        <div class="notice-item-body">
                            <div class="notice-item-desc"><p>等量取还：取车时多少油，还车时至少需同样油位还车</p></div>
                        </div>
                    </div>
                    <div class="notice-item">
                        <div class="notice-item-title">限制出行区域</div>
                        <div class="notice-item-body">
                            <div class="notice-item-desc">不能进入山东省、内蒙古、东北三省、新疆、西藏、海南岛
                                （如您在未报备车行的情况下，把租赁的车辆驾驶至禁行区域，车行有权按照合同约定收取相应的违约金或强制性收车，强制收车产生的拖车费/人工费/住宿费/交通费等收车成本将由您本人承担）
                            </div>
                        </div>
                    </div>
                </div>
                <div class="notice-footer">
                    <button class="button button-default"><span class="button-text">更多门店政策</span>
                        <svg class="button-icon icon-arrow-down">
                            <use xlink:href="#icon_arrow_down"></use>
                        </svg>
                    </button>
                    <button class="button button-default" style="margin-left: 20px;"><span class="button-text">订单条款&amp;租车须知</span>
                        <svg class="button-icon icon-arrow-down">
                            <use xlink:href="#icon_arrow_down"></use>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <aside class="aside">
            <div class="order-info">
                <div class="order-info-header"><span class="order-info-header-title">费用合计</span>
                    <div class="order-info-header-main"><h4 class="order-info-header-price"><i class="currency">¥</i>${serverResponse.data.myorder.orderPrice}
                    </h4><span class="order-info-header-other-price">未支付 ¥${serverResponse.data.myorder.orderPrice}</span></div>
                </div>
                <div class="order-info-list">
                    <div class="order-info-item"><span class="order-info-item-label">车辆租金(${serverResponse.data.myorder.carRentday}天)</span><span
                            class="order-info-item-value"><span class="order-info-item-desc"> </span>¥${serverResponse.data.car.carCategoryStartprice} x${serverResponse.data.myorder.carRentday}</span>
                    </div>
                    <%--<div class="order-info-item"><span class="order-info-item-label">基本保障服务</span><span
                            class="order-info-item-value"><span class="order-info-item-desc"></span>¥150</span></div>--%>
                    <div class="order-info-item"><span class="order-info-item-label">车行手续费<svg
                            class="order-info-item-icon-warning"><use
                            xlink:href="#icon_warning"></use></svg></span><span class="order-info-item-value"><span
                            class="order-info-item-desc"></span>¥${serverResponse.data.myorder.carRentday}*30</span></div>
                </div>
            </div>
            <div class="store"><h2 class="store-title">押金方式：到店付押金</h2>
                <div class="row">
                    <div class="row-title">支付方式：</div>
                    <div class="row-content"><p>刷预授权：驾驶员本人银联信用卡(有效期大于1个月)</p></div>
                </div>
                <div class="row">
                    <div class="row-title">押金说明：租车押金+违章押金</div>
                    <div class="row-content"><p>租车押金：取车时冻结3000元租车押金，若无车损，还车后解冻</p>
                        <p>违章押金：还车时冻结2000元违章押金，若无违章，还车后30天左右解冻</p></div>
                </div>
            </div>
        </aside>
    </div>
</div>
<footer class="global-footer fn-clear">

    <div class="zuche-bottom-info">
        <div class="box">
            <h3>关于</h3>
            <ul>
                <li><a rel="nofollow" href="" target="_blank">关于我们</a></li>
                <li><a rel="nofollow" href="" target="_blank">联系我们</a></li>
                <li><a rel="nofollow" href="" target="_blank">加入我们</a></li>
                <li><a rel="nofollow" href="" target="_blank">媒体报道</a></li>


            </ul>
        </div>
        <div class="box">
            <h3>条款</h3>
            <ul>
                <li><a rel="nofollow" href="" target="_blank">隐私条款</a></li>
                <li><a rel="nofollow" target="_blank" href="">用户协议</a></li>
                <li><a rel="nofollow" target="_blank" href="">信息处置制度</a></li>
                <li><a rel="nofollow" target="_blank" href="">租车规则</a></li>

            </ul>
        </div>
        <div class="box">
            <h3>帮助</h3>
            <ul>
                <li><a rel="nofollow" href="" target="_blank">客服中心</a></li>
                <li><a rel="nofollow" href="" target="_blank">互助问答</a></li>
                <li><a rel="nofollow" href="" target="_blank">常见问题</a></li>
                <li><a rel="nofollow" href="" target="_blank">出游安全提示</a></li>
            </ul>
        </div>

        <div class="box box_r">
            <div class="global-footer-icon wei-img fn-right">
                <!-- <em>微<br>信<br>公<br>众<br>号</em> -->
            </div>

            <div class="fn-right zzc_phone">
                <h4 class="service-title">客服热线</h4>
                <p class="title"><span class="sub">中国内地拨打：</span>1010-1020</p>
                <p class="text"><span class="sub">其他地区拨打： </span>+86-10-6064-1387</p>
                <a class="J-show-robot" href="javascript:;" target="_self" data-tj="/公用尾部/在线客服"
                   style="width: auto">在线客服</a>
            </div>

        </div>

        <div class="fn-clear"></div>
    </div>
    <div class="credential">
        <h3 class="credential-title">资质证书</h3>
        <ul class="credential-list">
            <li><a href="" target="_blank" rel="nofollow"><i class="icon certificate"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon zfb_qc"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon baidu_rz"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon shi_ming"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon chengxin"></i></a></li>
            <li><a href="" target="_blank" rel="nofollow"><i class="icon kexin"></i></a></li>
            <li><a id="_pingansec_bottomimagesmall_shiming" href="" target="_blank" rel="nofollow"><i
                    class="icon trustutn"></i></a></li>
        </ul>
    </div>
    <div class="copyright-box">
        <p>© 2011-2021 sbx.com&nbsp;&nbsp;思必行有限公司&nbsp;&nbsp;版权所有&nbsp;
            <a target="_blank" href="">营业执照</a>&nbsp;&nbsp;
            <a rel="nofollow" target="_blank" href="">苏ICP备114471007328号</a>&nbsp;&nbsp;
            <a rel="nofollow" target="_blank" href="" style="position: relative;padding-left: 24px;">
                <img src="" style="position: absolute;left: 0;top: -2px;">苏公网安备 44010602045644号
            </a>
        </p>
    </div>
</footer>

<script>
    var num = 15; //倒计时的秒数
    var URL = "${pageContext.request.contextPath}/index.jsp";
    var id = window.setInterval('doUpdate()', 1000);

    function doUpdate() {
        document.getElementById('page_div').innerHTML = num + '秒后自动返回首页';
        if (num == 0) {
            window.clearInterval(id);
            window.location = URL;
        }
        num--;
    }
</script>
</body>
</html>
